// pages/personal-data/index.js
import * as echarts from '../../ec-canvas/echarts';
let chartLine
function getOption() {
  var option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center',
      textStyle: { //图例文字的样式
        // color: '#fff',
        fontSize: 14
      },
    },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: '35%',
        radius: ['40%', '60%'],
        center: ['50%', '60%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2,
          normal: {
            label: {
              show: true,
              formatter: ' {b} : \n {c}({d}%)'
            },
            labelLine: { show: true }
          },
          fontSize: '30',
        },
        label: {
          show: false,
          position: 'center',
          normal: {
            textStyle: {
              fontSize: 12
            }
          }
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '30',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          normal: {
            show: true,
            length: 7
          }
        },
        data: [
          { value: 1048, name: '预约带看' },
          { value: 735, name: '预约报备', itemStyle: { color: "#ff5e22" } },
          { value: 580, name: '实际带看' },
        ]
      }
    ]
  };
  return option;
}
function getOption2() {
  var option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // Use axis to trigger tooltip
        type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
      }
    },
    legend: {
      data: ['预约带看', '预约报备', '实际带看', '实际成交'],
      itemHeight : 12, 
      itemWidth : 12, 
      textStyle: { //图例文字的样式
        fontSize: 13
      },
    },
    grid: {
      left: '2%',
      right: '6%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category',
      data: ['组一', '组二', '组三', '组四'],
      axisLabel: {
        textStyle: {
          show:true,
           fontFamily:'微软雅黑',
            fontSize: '14',
        },
      }
    },
    series: [
      {
        name: '预约带看',
        type: 'bar',
        stack: 'total',
        label: {
          show: true,
          textStyle: {
            fontSize: 16,
            color: '#fff'
          }
        },
        emphasis: {
          focus: 'series'
        },
        data: [320, 302, 301, 334, 390, 330, 320],
        barCategoryGap:'41%',
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
          offset: 0,
          color: '#ffde43'
        }, {
          offset: 0.5,
          color: '#fe9838'
        }]),
        barBorderRadius: [20, 20, 0, 0],
        borderWidth: 0,
        borderColor: '#333',
      },
      {
        name: '预约报备',
        type: 'bar',
        stack: 'total',
        label: {
          show: true,
          textStyle: {
            fontSize: 16,
            color: '#fff'
          }
        },
        emphasis: {
          focus: 'series'
        },
        data: [120, 132, 101, 134, 90, 230, 210],
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
          offset: 0,
          color: '#fc5936'

        }, {
          offset: 0.5,
          color: '#ff9d44'

        }]),
        barBorderRadius: [20, 20, 0, 0],
        borderWidth: 0,
        borderColor: '#333',
      },
      {
        name: '实际带看',
        type: 'bar',
        stack: 'total',
        label: {
          show: true,
          textStyle: {
            fontSize: 16,
            color: '#fff'
          }
        },
        emphasis: {
          focus: 'series'
        },
        data: [220, 182, 191, 234, 290, 330, 310],
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
          offset: 0,
          color: '#e51f19'

        }, {
          offset: 0.5,
          color: '#ff6550'

        }]),
        barBorderRadius: [20, 20, 0, 0],
        borderWidth: 0,
        borderColor: '#333',
      },
      {
        name: '实际成交',
        type: 'bar',
        stack: 'total',
        label: {
          show: true,
          textStyle: {
            fontSize: 16,
            color: '#fff'
          }
        },
        emphasis: {
          focus: 'series'
        },
        data: [150, 212, 201, 154, 190, 330, 410],
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
          offset: 0,
          color: '#b62040'

        }, {
          offset: 0.5,
          color: '#fe3d6b'

        }]),
        barBorderRadius: [20, 20, 0, 0],
        borderWidth: 0,
        borderColor: '#333',
      }
    ]
  };
  return option;
}
Page({

  /**
   * 页面的初始数据
   */
  data: {
    ecLine: {
      onInit: function (canvas, width, height,dpr) {
        //初始化echarts元素，绑定到全局变量，方便更改数据
        chartLine = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr
        });
        canvas.setChart(chartLine);

        //可以先不setOption，等数据加载好后赋值，
        //不过那样没setOption前，echats元素是一片空白，体验不好，所有我先set。
        var option = getOption();
        chartLine.setOption(option);
      }
    },
    ecLine1: {
      onInit: function (canvas, width, height,dpr) {
        //初始化echarts元素，绑定到全局变量，方便更改数据
        chartLine = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr
        });
        canvas.setChart(chartLine);

        //可以先不setOption，等数据加载好后赋值，
        //不过那样没setOption前，echats元素是一片空白，体验不好，所有我先set。
        var option1 = getOption2();
        chartLine.setOption(option1);
      }
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // this.drawnLine()
    console.log(echarts)
  },

  drawnLine() {
    let query = wx.createSelectorQuery()
    let echart = echarts.init(query.select('#chart'))
    echart.setOption({
      title: {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 1048, name: '搜索引擎' },
            { value: 735, name: '直接访问' },
            { value: 580, name: '邮件营销' },
            { value: 484, name: '联盟广告' },
            { value: 300, name: '视频广告' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})